// 收货地址(添加 & 编辑)

<template>
  <view>
    <view class="input-box">
      <view class="input-item">
        <view class="item-title">联系人</view>
        <view class="item-content">
          <input type="text" placeholder="请输入您的姓名" v-model="postForm.connect_name" />
        </view>
      </view>
      <view class="input-item">
        <view class="item-title">手机号码</view>
        <view class="item-content">
          <input type="number" placeholder="请输入您的手机号码" v-model.number="postForm.connect_mobile" />
        </view>
      </view>
      <view class="input-item">
        <view class="item-title">地址</view>
        <view class="item-content" :style="{ color: postForm.province ? '#111' : '#999' }">
          <picker mode="region" @change="regionChange">
            {{ addressValue[0] }} {{ addressValue[1] }} {{ addressValue[2] }}
          </picker>
        </view>
      </view>
      <view class="input-item">
        <view class="item-title">详细地址</view>
        <view class="item-content">
          <input type="text" placeholder="如街道、门牌号、小区、单元室" v-model="postForm.detail_address" />
        </view>
      </view>
    </view>
    <view class="input-box">
      <view class="input-item">
        <view class="item-title">设为默认地址</view>
        <view class="item-content">
          <switch
            color="#17DB45"
            style="transform: scale(0.9)"
            @change="defaultAddressChange"
            :checked="postForm.is_default == 1 ? true : false"
          />
        </view>
      </view>
    </view>
    <view class="btn-box">
      <view class="btn btn1" @tap="saveAddress">保存</view>
      <view class="btn btn2" @tap="deleteAddress" v-if="type === 'edit'">删除</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      type: '',
      id: '',
      addressValue: ['请选择', '请选择', '请选择'],
      postForm: {
        connect_name: '',
        connect_mobile: '',
        province: '',
        city: '',
        area: '',
		province_name: '',
		city_name: '',
		area_name: '',
        detail_address: '',
        is_default: 0
      }
    }
  },
  onLoad(options) {
    this.type = options.type
    if (options.type === 'edit') {
      const address = JSON.parse(options.address)
	  console.log("address",address);
      this.postForm.connect_name = address.connect_name
      this.postForm.connect_mobile = address.connect_mobile
      this.postForm.province = address.province
      this.postForm.city = address.city
      this.postForm.area = address.area
      this.postForm.detail_address = address.detail_address
      this.postForm.is_default = address.is_default

      this.id = address.id

      // this.addressValue[0] = address.province_name
      // this.addressValue[1] = address.city_name
      // this.addressValue[2] = address.area_name
	  this.addressValue[0] = address.province
	  this.addressValue[1] = address.city
	  this.addressValue[2] = address.area
    }
  },
  methods: {
    // 地址改变
    async regionChange(e) {
		console.log("点击改变地址");
      this.addressValue = e.detail.value
      this.postForm.province = e.detail.code[0]
      this.postForm.city = e.detail.code[1]
      this.postForm.area = e.detail.code[2]
	  this.postForm.province_name = e.detail.value[0]
	  this.postForm.city_name = e.detail.value[1]
	  this.postForm.area_name = e.detail.value[2]
    },
    // 默认地址改变
    defaultAddressChange(e) {
      e.detail.value ? (this.postForm.is_default = 1) : (this.postForm.is_default = 0)
    },
    // 保存
    async saveAddress() {
      if (!this.postForm.connect_name) {
        return uni.showToast({
          title: '请输入联系人',
          icon: 'none'
        })
      }

      if (!this.postForm.connect_mobile) {
        return uni.showToast({
          title: '请输入手机号码',
          icon: 'none'
        })
      }

      if (!this.postForm.province) {
        return uni.showToast({
          title: '请选择地址',
          icon: 'none'
        })
      }

      if (!this.postForm.detail_address) {
        return uni.showToast({
          title: '请输入详细地址',
          icon: 'none'
        })
      }

      let res = null
      if (this.type === 'add') {
        res = await this.$http.post('/api/kuerp/order/address/adddetail', this.postForm)
      } else if (this.type === 'edit') {
        res = await this.$http.post('/api/kuerp/order/address/editdetail', { id: this.id, ...this.postForm })
      }
      if (res.code == 200) {
        uni.showToast({
          title: (this.type === 'add' ? '添加' : '编辑') + '成功',
          icon: 'success',
          mask: true
        })
        setTimeout(() => {
          uni.navigateBack({ delta: 1 })
        }, 600)
      }
    },
    // 删除
    deleteAddress() {
      uni.showModal({
        title: '提示',
        content: '是否确认删除？',
        success: async ({ confirm }) => {
          if (confirm) {
            const res = await this.$http.post('/api/kuerp/order/address/deldetail', { id: this.id })
            if (res.code == 200) {
              uni.showToast({
                title: '删除成功',
                icon: 'success',
                mask: true
              })
              setTimeout(() => {
                uni.navigateBack({ delta: 1 })
              }, 600)
            }
          }
        }
      })
    }
  }
}
</script>

<style>
page {
  background-color: #f7f7f7;
}
</style>
<style lang="scss" scoped>
/deep/ .input-placeholder {
  color: #999;
}

.input-box {
  margin: 28rpx auto;
  width: 686rpx;
  background: #ffffff;
  border-radius: 20rpx;
  color: #333333;
  .input-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    width: 622rpx;
    height: 120rpx;
    border-bottom: 1px solid #ddd;
    &:last-child {
      border-bottom: none;
    }
    .item-title {
    }
    .item-content {
      flex: 1;
      padding-left: 20rpx;
      text-align: right;
      input {
        color: #111;
      }
    }
  }
}

.btn-box {
  .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 686rpx;
    height: 92rpx;
    font-size: 36rpx;
    font-weight: 500;
    border-radius: 50rpx;
    &.btn1 {
      margin: 40rpx auto 20rpx;
      background: #fe492f;
      color: #ffffff;
    }
    &.btn2 {
      margin: 0 auto 20rpx;
      border: 1px solid #fe492f;
      color: #fe492f;
    }
  }
}
</style>
